<template>
	<view class="between title">

		<view class="pp">
			<div class="text">{{ $t(title) }}</div>
			<div class="bg"></div>
		</view>
		<view class="flex more" v-if="moreGoPath" @click="go">
			<div class="more-text">{{ $t('查看更多') }}</div>
			<image style="width: 13rpx;margin-top: 2rpx;" mode="widthFix" :src='serverImageUrl("/static/images/user/newUI/more.png")'>
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["title", "moreGoPath"],
		methods: {
			go() {
				this.$u.route({
					url: this.moreGoPath
				})
			},
		}
	}
</script>

<style lang="scss">
	.title {
		margin-top: 32rpx;
		margin-bottom: 24rpx;
		align-items: center;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.more {
		.more-text {
			color: #999;
			font-size: 26rpx;
			margin-right: 8px;
		}
	}

	.pp {
		font-weight: 600;
		font-size: 30rpx;
		color: #3D3D3D;
		position: relative;

		.text {
			position: relative;
			z-index: 9;
			font-size: 30rpx;
		}

		.bg {
			position: absolute;
			left: 0;
			bottom: -3rpx;
			width: calc(100% + 40rpx);
			height: 14rpx;
			border-radius: 0rpx 22rpx 22rpx 0rpx;
			background: linear-gradient(180deg, #D9F0A3 0%, #FFFFFF 124%, rgba(201, 239, 49, 0) 124%);
			box-shadow: 2rpx 2rpx 9rpx 0rpx #E0F3B5;
		}
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>